@charset "utf-8";


$mobile-width: 980px;

$tablet-width: 1250px;
$desktop-width: 1500px;

@mixin mobile {
	@media (max-width: #{$mobile-width}) {
	  @content;
	}
  } 
@mixin tablet {
  @media (max-width: #{$tablet-width}) {
    @content;
  }
}
 
@mixin desktop {
  @media (max-width: #{$desktop-width}) {
    @content;
  }
}

body{
	@include mobile{
		padding-top: 1.2rem;
	}
}
.container{
	@include desktop{
		width: 1200px;
	}
	@include tablet{
		width: 980px;
	}
	@include mobile{
		width: 7.1rem;
	}
}
/*首页*/
/*首页banner*/
.jwrap {width: 100%;height: 660px;min-width: 1390px;overflow: hidden;
	@include desktop{
		height: 600px;
	}
	@include tablet{
		min-width: 980px;height: 520px;
	}
	@include mobile{
		position: relative;height: 13.6rem;min-width: 320px;
	}
	.banner_intro_dist{
		position: relative;top: -660px;
		@include desktop{
			top: -600px;
		}
		@include tablet{
			top: -520px;
		}
		@include mobile{
			height: 7.8rem;
			top: 0;
		}
		.swp_mBan{
			.swiper-slide{
				.compuer_b{
					height: 660px;
					@include desktop{
						height: 600px;background-size: cover !important;
					}
					@include tablet{
						height: 520px;background-size: cover !important;
					}
					@include mobile{
						height: 0;
					}
				}
				@include mobile{
					.mobile_b {
						height: 5.4rem;background-size: cover !important;
					}
				}
			}
		}
	}
}
.index_above_dist {position: relative;
	@include mobile{
		position: absolute;bottom: 0;left: 0;width: 100vw; 
	}
	.banner_zx_box {position: relative;width: 270px;height: 660px;z-index: 9;
		@include desktop{
			height: 600px;
		}
		@include tablet{
			height: 520px;
		}
		@include mobile{
			width: 100vw;height: 9.2rem;background: #fff;
		}
		.banner_zx_mask {position: absolute;z-index: 3;left: 0;top: 0;width: 270px;height: 100%;background: #000;opacity: 0.7;
			@include mobile{
				width: 100vw;height: 8.2rem;background: #fff;
			}
		}
		.banner_zx_dist {position: relative;z-index: 5;height: 100%;width: 270px;background: transparent;
			@include mobile{
				width: 7.1rem;margin-left: auto;margin-right: auto;
			}
			.banner_zx_type {padding-top: 32px;width: 100%;font-size: 0;
				@include mobile{
					padding-top: 0.4rem;
				}
				.banner_zx_type_wrap  {
					p{
						font-size: 20px;color: #fff;text-align: center;line-height: 40px;font-family: "Microsoft YaHei";
						@include mobile{
							font-size: 0.4rem;line-height: 0.4rem;margin-bottom: 0.2rem;color: #333333;
						}
					}
					.banner_zx_form_text {
						font-size: 14px;color: #fff;line-height: 26px;
						@include mobile{
							font-size: 0.22rem;line-height: 0.22rem;color: #333333;
						}
						em {margin-right: 4px;color: #9f7124;}
						
					}
				}
			}
			.banner_zx_form_wrap {
				width: auto;padding: 30px 30px 0;margin: 0 auto;
				@include mobile{
					padding: 0;
				}
				form {
					position: relative;z-index: 9;width: 100%;height: auto;
					.banner_zx_input {
						position: relative;z-index: 10;width: 100%;height: 38px;margin-bottom: 7px;
						@include mobile{
							height: auto;margin-bottom: 0.3rem;
						}
						label {
							position: absolute;height: 36px;line-height: 36px;left: 12px;top: 0;color: #999;
							@include mobile{
								line-height: 0.59rem;font-size: 0.24rem;
							}
						}
						input {
							width: 210px;height: 35px;line-height: 22px;border-radius: 0;padding: 7px 23px 7px 10px;color: #666;border: 1px solid #e4e4e4;font-family: "Microsoft YaHei";background: #fff;
							@include mobile{
								width: 100%;height: 0.59rem;font-size: 0.24rem;line-height: 0.59rem;
							}
						}
						.banner_area_unit {
							position: absolute;right: 10px;height: 34px;line-height: 34px;top: 0;
							@include mobile{
								font-size: 0.24rem; line-height: 0.59rem;
							}
						}
						.banner_huxing_wrap {
							width: 275px;
							@include mobile{
								width: auto;
							}
							.banner_huxing_solo {
								position: relative;float: left;width: 102px;height: 36px;line-height: 36px;margin-right: 5px;text-indent: 12px;border-radius: 0;border: 1px solid #e4e4e4;background: #fff;cursor: pointer;
								@include mobile{
									width: 3.39rem;margin-right: 0.3rem; height: 0.59rem; line-height: 0.59rem; font-size: 0.24rem;
									&:nth-child(3) {
										margin-right: 0;
									}
								}
								em {
									position: absolute;width: 9px;height: 5px;right: 30px;top: 0px;font-size: 16px;
									@include mobile{
										width: 0.17rem;height: 0.1rem;font-size: 0.24rem;
									}
								}
								ul {
									display: none;background: #fff;border: 1px solid #e4e4e4;border-top: none;position: absolute;left: -1px;top: 34px;width: 100%;z-index: 2;overflow: hidden;
									li {
										height: 34px;line-height: 34px;width: 100%;
										a {
											text-indent: 12px;display: block;width: 100%;height: 100%;
										}
									}
								}
							}
						}
					}
					.banner_user2know {
						margin-right: -3px;font-size: 12px;color: #fff;line-height: 40px;font-family: "Microsoft YaHei";
						@include mobile{
							font-size: 0.24rem;line-height: 0.24rem;color: #333333;
						}
						i {
							display: inline-block;width: 13px;height: 13px;background: url(../images/index-icons.png) -40px -40px no-repeat;vertical-align: middle;margin: -2px 4px 0 0;
							cursor: pointer;
							&.on {
								background-position: -24px -40px;
							}
						}
						a {
							color: #9f7124;font-family: "Microsoft YaHei";font-size: 12px;
						}
					}
					.banner_form_err_tip {
						display: none;padding-bottom: 3px;font-size: 14px;line-height: 13px;color: #d00;
						.iconfont {font-size: 16px;margin-right: 5px;color: #d00;
						}
						}
						.banner_obtain_btn {display: block;width: 210px;height: 45px;line-height: 45px;margin: 10px auto 0;color: #fff;font-size: 16px;text-align: center;background: #9f7124;font-family: "Microsoft YaHei";
							&:hover {color: #fff;}
							@include mobile{
								width: 100%;height: 0.54rem;line-height: 0.54rem;font-size: 0.26rem;margin-top: 0.3rem;
							}
					}
				}
			}
			.banner_serve_num {
				padding-top: 30px;
				@include mobile{
					padding-top: 0.3rem;
				}
				.serve_num {
					width: 218px;padding: 0;margin: 0 auto;line-height: 26px;font-size: 12px;text-align: center;color: #fff;font-family: "微软雅黑";
					@include mobile{
						font-size: 0.22rem;color: #333;
					}
					span {
						padding: 0 6px;
					}
					i {
						display: inline-block;height: 18px;line-height: 18px;width: 16px;margin-right: 2px;font-size: 16px;text-align: center;color: #9f7124;font-style: normal;border: 0 none;border-radius: 0;background: #fff;
						@include mobile{
							font-size: 0.22rem;background: #9f7124;color: #fff;
						}
					}
				}
			}
			.quanyi {
				font-size: 12px;
				color: #fff;
				text-align: center;
				margin-top: 0px;
				@include mobile{
					font-size: 0.22rem;color: #333;
				}
			}
			
		}
	}
}
.mr0 {
	margin-right: 0 !important;
}

/*首页banner结束*/

/*住帅设计*/
.zhushuai_desing {
	background: url(../images/indexbg.jpg) no-repeat center;background-size: cover;
	@include mobile{
		background: url(../images/index_jg.jpg) no-repeat top center;background-size: contain;padding-top: 0.2rem;
	}
	.desing_lt {
		float: left;width: 310px;height: 500px;background: #fff;
		@include desktop{
			width: 280px;
			height: 490px;
		}
		@include tablet{
			width: 230px;
			height: 490px;
		}
		@include mobile{
			display: none;
		}
		.nr_mr {
			padding: 40px;
			@include tablet{
				padding: 30px;
			}
			.logonr {
				height: 30px;margin-bottom: 40px;
				@include desktop{
					margin-bottom: 20px;
				}
				@include tablet{
					margin-bottom: 20px;
				}
				img {
					height: 30px;width: auto;
				}
			}
			.jieshao {
				font-size: 18px;line-height: 36px;color: #666666;margin-bottom: 70px;
				@include desktop{
					margin-bottom: 50px;
				}
				@include tablet{
					margin-bottom: 50px;
				}
			}
			.dt{
				img {
					width: 100%;margin-bottom: 56px;
					@include desktop{
						margin-bottom: 40px;
					}
					@include tablet{
						margin-bottom: 40px;
					}
				}
			}
			.like {
				width: 230px;height: 40px;background: #9f7124;font-size: 16px;line-height: 40px;text-align: center;color: #fff;
				@include desktop{
					width: 100%;
				}
				@include tablet{
					width: 100%;
				}
			}
		}
	}
	.desing_rt {
		float: right;width: 1030px;height: 500px;
		@include desktop{
			width: 892px;
		}
		@include tablet{
			width: 722px;
		}
		@include mobile{
			width: 100%;
			height: 7.5rem;
		}
		ul{
			li {
				width: 310px;height: 230px;background: #fff;float: left;margin-right: 50px;margin-bottom: 40px;cursor: pointer;
				&:nth-child(3n) {
					margin-right: 0;
				}
				@include desktop{
					width: 280px;margin-right: 25px;margin-bottom: 30px;
				}
				@include tablet{
					width: 222px;margin-right: 28px;margin-bottom: 30px;
				}
				@include mobile{
					width: 3.4rem;height: 2.3rem;margin-right: 0.3rem;margin-bottom: 0.3rem;box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.1);
					&:nth-child(3n) {
						margin-right: 0.3rem;
					}
					&:nth-child(2n) {
						margin-right: 0;
					}
				}
				.ds-icon {
					width: 50px;
					height: 50px;
					background: url(../images/indexico.png);
					background-size: 300px 100px;
					transition: all 0.5s;
					@include mobile{
						width: 0.5rem;height: 0.5rem;background-size: 3rem 1rem;
					}
				}
				.ds-icon1 {
					background-position: 0 -50px;
					@include mobile{
						background-position: 0 -0.5rem;
					}
				}
				.ds-icon2 {
					background-position: -51px -50px;
					@include mobile{
						background-position: -0.51rem -0.5rem;
					}
				}
				.ds-icon3 {
					background-position: -100px -50px;
					@include mobile{
						background-position: -1rem -0.5rem;
					}
				}
				.ds-icon4 {
					background-position: -150px -50px;
					@include mobile{
						background-position: -1.5rem -0.5rem;
					}
				}
				.ds-icon5 {
					background-position: -200px -50px;
					@include mobile{
						background-position: -2rem -0.5rem;
					}
				}
				.ds-icon6 {
					background-position: -250px -50px;
					@include mobile{
						background-position: -2.5rem -0.5rem;
					}
				}
				.rt_nr {
					padding: 37px;
					@include desktop{
						padding: 30px;
					}
					@include tablet{
						padding: 30px;
					}
					@include mobile{
						padding: 0.3rem;
					}
					h4 {
						font-size: 24px;line-height: 24px;padding-bottom: 10px;border-bottom: 1.5px solid #cccccc;position: relative;padding-top: 10px;
						&:after {
							content: "";display: block;width: 30px;height: 1.5px;background: #999999;position: absolute;bottom: -1.5px;
						}
						@include tablet{
							font-size: 18px;
						}
						@include mobile{
							font-size: 0.24rem;line-height: 0.24rem;padding-top: 0.2rem;padding-bottom: 0.1rem;
						}
					}
					p {
						font-size: 16px;line-height: 24px;padding-top: 10px;
						@include mobile{
							font-size: 0.22rem;
							line-height: 0.3rem;
						}
					}
				}
				&:hover {
					background: #9f7124;
					h4, p {
						color: #fff;
					}
					h4{
						&:after {
							background: #fff;
						}
					}
					.ds-icon1 {
						background-position: 0 0px;
						@include mobile{
							background-position: 0 0rem;
						}
					}
					.ds-icon2 {
						background-position: -51px 0;
						@include mobile{
							background-position: -0.51rem 0;
						}
					}
					.ds-icon3 {
						background-position: -100px 0;
						@include mobile{
							background-position: -1rem 0;
						}
					}
					.ds-icon4 {
						background-position: -150px 0;
						@include mobile{
							background-position: -1.5rem 0;
						}
					}
					.ds-icon5 {
						background-position: -200px 0;
						@include mobile{
							background-position: -2rem 0;
						}
					}
					.ds-icon6 {
						background-position: -250px 0;
						@include mobile{
							background-position: -2.5rem 0;
						}
					}
				}
			}
		}
	}
}

/*住帅设计结束*/
/*住帅精选案例*/
.zhushuai_case{
	@include mobile{
		background: url(../images/index_jg.jpg) top center no-repeat; background-size: contain;padding-top: .2rem;
	}
	.select-box {
		border: 1px solid #edecec;border-bottom: 1px;
		@include mobile{
			border: none;
		}
		.anliTitle{
			float: left;
			@include mobile{
				width: 100%;
			}
			.titles {
				height: 49px;width: 80px; line-height: 49px; background: #fafafa;text-align: center; border-bottom: 1px solid #edecec;
				@include mobile{
					width: 33.3%; float: left; background: #fff; 
					&.active{
						border-bottom: 2px solid #9f7124;
					}
				}
			}
		}
		.list-box {
			padding: 0;margin: 0;overflow: hidden;float: left; width: calc(100% - 80px);
			@include mobile{
				width: 100%; padding-top: 0.3rem;
			}
			li {
				min-height: 49px;margin: 0;border-bottom: 1px solid #edecec;text-align: center;line-height: 48px;position: relative;overflow: hidden;text-align: left;
				@include mobile{
					position: inherit; left: auto;overflow: inherit;
					&:nth-child(2){
						display: none;
					}
					&:nth-child(3){
						display: none;
					}
				}
				.content {
					position: absolute;overflow: hidden;left: 20px;width: 960px;color: #333;padding-bottom: 13px;padding-left: 10px;
					@include mobile{
						position: inherit; overflow:inherit; width: 100%;display: flex; justify-content: flex-start;flex-wrap: wrap;
					}
					span {
						display: inline-block;width: 90px;
						&:hover a {
							background: #9f7124;
							color: #fff;
						}
						
						@include tablet{
							min-width: 70px;width: auto;
						}
						@include mobile{
							margin-right: 0.2rem; margin-bottom: 0.2rem;
							&:nth-child(4n){
								margin-right: 0;
							}
						}
					}
					a {
						padding: 4px;
						@include mobile{
							width: 1.46rem;height: 0.49rem; border-radius: 0.2rem; display: block;font-size: 0.24rem;line-height: 0.49rem; text-align: center; padding: 0;background: #e6e6e6;border: 1px solid #e6e6e6;
						}
					}
					.active{
						a {
							background: #9f7124;
							color: #fff;
							@include mobile{
								background: #f9e2c0;border: 1px solid #9f7124;color: #9f7124;;
							}
						}
					}
				}
			}
		}
	}
	.content-cards {
		margin-top: 60px;
		@include mobile{
			margin-top: 0; height: 10rem; overflow: hidden;
		}
		.zhuangxiu-box {
			float: left;margin-right: 29.6px;margin-bottom: 40px;transition: all 0.5s;
			@include desktop{
				margin-right: 26px;
			}
			@include tablet{
				width: 228px;margin-right: 22px;margin-bottom: 22px;
			}
			@include mobile{
				width: 3.32rem; margin-right: 0.4rem;
				&:nth-child(2n){
					margin-right: 0;
				}
			}
			&:hover{
				box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
			}
			&:nth-child(4n) {
				margin-right: 0;
			}
			.zhuangxiu-card {
				width: 325px;height: 520px;margin: auto;border: 1px solid #edecec;transition: all 0.5s;
				@include desktop{
					width: 280px;
				}
				@include tablet{
					width: 228px;height: 490px;
				}
				@include mobile{
					width: 3.32rem;
					height: 4.78rem;
				}
				.img-box {
					height: 240px;width: 100%;overflow: hidden;
					@include desktop{
						height: 210px;
					}
					@include tablet{
						height: 170px;
					}
					@include mobile{
						height: 2rem;
					}
					img {
						transition: all 0.5s;
					}
				}
			}
		}
		.detail-box {
			width: 100%;height: 80px;padding: 15px 30px;
			@include mobile{
				padding: 0 0.26rem;
				height: auto;
			}
			.designer {
				width: 90px;height: 90px;border-radius: 50%;overflow: hidden;margin-left: auto;margin-right: auto;margin-top: -60px;position: relative;
				@include mobile{
					width:1.3rem; height: 1.3rem; margin-top: -0.9rem;
				}
				.hide_nr{
					background: rgba(159, 113, 36, 0.5);position: absolute;top: 70px;width: 100%;width: 90px;height: 90px;text-align: center;color: #fff;transition: all 0.5s;
					.name {
						color: #fff;font-size: 14px;line-height: 14px;padding-top: 2px;padding-bottom: 10px;
					}
					.line {
						width: 40px;height: 1px;background: #fff;margin-left: auto;margin-right: auto;margin-bottom: 10px;
					}
					.ckqb {
						font-size: 12px;line-height: 12px;
					}
				}
				&:hover{
					.hide_nr{
						.name {
							padding-top: 20px;
						}
						top: 0px;
					}
				}
				
			}
			.msg{
				.title_al {
					text-align: center;padding-top: 30px;padding-bottom: 30px;
					@include mobile{
						padding-top: 0.2rem; padding-bottom: 0.2rem;
					}
					a {
						font-size: 24px;line-height: 24px;
						@include mobile{
							font-size: 0.36rem;
							line-height:0.36rem ;
						}
					}
				}
				.sub {
					font-size: 14px;line-height: 24px;
					@include mobile{
						overflow: hidden;
					}
					a {
						display: inline-block;min-width: 106px;
						@include tablet{
							min-width: 80px;
						}
						@include mobile{
							width: 1.28rem;
							white-space: nowrap;
							float: left;
						}
					}
					span {
						color: #9f7124;
					}
				}
				.ckal {
					width: 100px;height: 34px;text-align: center;line-height: 34px;border: 1px solid #333333;margin-left: auto;margin-right: auto;margin-top: 30px;
					@include mobile{
						margin-top: 0.1rem; width: 1.4rem; height: 0.4rem; font-size: 0.24rem;  line-height: 0.4rem;
					}
				}
			}
			&:hover{
				.msg{
					.ckal {
						background: #9f7124;
						border: 1px solid #9f7124;
						a {
							color: #fff;
						}
					}
				}
			}
		}
	}
	.chakanquan {
		width: 200px;height: 40px;background: #9f7124;text-align: center;margin-left: auto;margin-right: auto;margin-top: 10px;
		@include mobile{
			width: 2rem; height: 0.5rem;  margin-top: 0.4rem;
		}
		a {
			color: #fff;line-height: 40px;font-size: 16px;
			@include mobile{
				line-height: 0.5rem; font-size: 0.24rem;
			}
		}
	}
}
/*住帅精选案例结束*/
/*住帅VR看房*/
.zhushuai_VR {
	height: 1000px;background: url(../images/vr-bg.jpg) no-repeat center;background-size: cover;
	@include mobile{
		height: 6.3rem; background:#fff; 
		background: url(../images/index_jg.jpg) top center no-repeat;
		background-size: contain;
		padding-top: .2rem;
	}
	.container {
		position: relative;
		@include mobile{
			height: 6.3rem;
		}
		.title2{
			@include tablet{
				left: 130px;z-index: 9;
			}
			@include mobile{
				left: 0;  padding: .5rem 0 0;text-align: left;overflow: hidden; top: 0;
				.vrtitle{
					line-height: .36rem;font-size: .36rem;float: left;font-weight: bold;margin-bottom: 20px;
				}
				p{
					font-size: .22rem;line-height: .22rem;padding-top: .14rem;padding-left: .1rem;float: left;color: #666;
					max-width: 80%;white-space: nowrap;
				}
				.line{
					display: none;
				}
				}
				
			}
		.chooselist{
			position: absolute;top: 0;left: 0;z-index: 1;visibility: hidden;transition: all 2s;opacity: 0;
			&.show {
				visibility: inherit;z-index: 2;opacity: 1;
			}
		}
		.choose {
			width: 110px;height: 630px;position: absolute;top: 70px;left: 0;z-index: 9;
			@include mobile{
				width: 100%;
				top: auto;
				bottom: 0.45rem; height: auto;
			}
			ul{
				@include mobile{
					display: flex; justify-content: center;
				}
				li {
					width: 110px;height: 110px;border-radius: 50%;overflow: hidden;margin-bottom: 20px;cursor: pointer;overflow: hidden;border: 2px solid rgba(0, 0, 0, 0);
					@include mobile{
						width: 0.06rem; height:  0.06rem; border-radius: 0.03rem; background: #999999; border: none; float: left;margin-right: 0.1rem;
					}
					img {
						transition: all 0.5s;
						@include mobile{
							display: none;
						}
					}
					&.nowli {
						border-color: #9f7124;
						@include mobile{
							width: 0.3rem;
						}
						img {
							transform: scale(1.2);
	
						}
					}
				}
			}
			
		}
		.con_vr {
			padding-left: 180px;padding-top: 216px;width: 50%;float: left;position: relative;z-index: 2;
			@include tablet{
				padding-left: 130px;
			}
			@include mobile{
				padding-left: 0;
				padding-top: 1.24rem; width: 100%;     position: absolute;
				bottom: 0;
			}
			.vr_left{
				
				.jsr {
					width: 160px;height: 160px;border-radius: 50%;overflow: hidden;margin-bottom: 30px;
					@include mobile{
						display: none;
					}
				}
				.info {
					font-size: 16px;
					@include mobile{
						display: none;
					}
					li {
						overflow: hidden;margin-bottom: 16px;
						.tlt {
							float: left;width: 80px;line-height: 16px;text-align-last: justify;text-align: justify;text-justify: distribute-all-lines;color: #9f7124;
						}
						.js {
							float: left;font-size: 14px;line-height: 16px;
						}
					}
				}
				.option {
					overflow: hidden;margin-top: 22px;
					@include mobile{
						display: none;
					}
					.work {
						width: 140px;height: 38px;background: #9f7124;text-align: center;float: left;line-height: 38px;margin-right: 20px;
						a {
							color: #fff;display: block;
						}
					}
				}
				.info_bar {
					width: 1000px;height: 130px;background: #9f7124;padding: 30px;margin-top: 73px;position: relative;left: -180px;
					@include tablet{
						width: 980px;left: -130px;
					}
					@include mobile{
						width: 6.88rem; height: 1.3rem; left: 0; padding: 0; margin-top: 0;position: absolute;bottom: 0;padding-top: 0.34rem;
						padding-left: 0.34rem;
					}
					.style {
						color: #fff;font-size: 21px;line-height: 24px;
						@include mobile{
							font-size:0.24rem ; line-height: 0.26rem;
						}
					}
					dl {
						display: flex;margin-top: 20px;
						@include mobile{
							margin-top: 0.2rem;
						}
						dd {
							color: #fff;padding-right: 60px;
							@include mobile{
								padding-right: 0.25rem; font-size: 0.2rem; width: 1.5rem;
							}
							.icon {
								width: 20px;height: 20px;background-size: cover !important;display: inline-block;position: relative;top: 4px;margin-right: 10px;
								@include mobile{
									width: 0.2rem; height: 0.2rem; margin-left: 0.1rem; position: relative; top: 0rem;
								}
							}
							.icon01 {
								background: url(../images/vricon01.png) no-repeat center;
							}
							.icon02 {
								background: url(../images/vricon02.png) no-repeat center;
							}
							.icon03 {
								background: url(../images/vricon03.png) no-repeat center;
							}
						}
					}
					.moreal {
						width: 200px;height: 130px;background: #313131;position: absolute;top: 0;right: 0;
						@include mobile{
							width: 1.4rem; height: 1.3rem; 
						}
						img {
							width: 48px;display: block;margin: 32px auto 0;
							@include mobile{
								width: 0.36rem; margin: 0.28rem auto 0;
							}
						}
						p {
							font-size: 16px;line-height: 16px;margin-top: 22px;color: #fff;text-align: center;
							@include mobile{
								font-size: 0.2rem; line-height: 0.2rem; margin-top: 0.1rem;
							}
						}
					}
				}
			}
			
		}
		.righttp {
			width: 50%;float: right;height: 1000px;position: relative;z-index: 0; 
			@include mobile{
				width: 7.1rem; height: 3.6rem; margin-top: 1.24rem;
			}
			img {
				position: absolute;top: 0;left: 0;width: auto;height: 1000px;
				@include mobile{
					width: 100%; height: 100%;
				}
			}
		}
	}
}
/*住帅VR看房结束*/
/*住帅设计大咖开始*/
.zhushuai_daka{
	@include mobile{
		background: url(../images/index_jg.jpg) top center no-repeat;
    background-size: contain;
    padding-top: .2rem;
	}
	.design-box{
	
		.bigbar {
			width: 325px;height: 590px;float: left;
			@include desktop{
				width: 280px;height: 518px;
			}
			@include tablet{
				width: 228px;height: 418px;
			}
			@include mobile{
				display: none;
			}
			.bingnr {
				height: 590px;background-size: cover !important;position: relative;
				@include desktop{
					height: 518px;
				}
				
				.info {
					position: absolute;bottom: 0;left: 0;height: 409px;font-size: 16px;opacity: 0;transition: all 0.5s;
					@include desktop{
						height: 480px;background-size: cover;
					}
					@include tablet{
						height: 480px;background-size: 100% 100%;
					}
					ul {
						overflow: hidden;margin-bottom: 16px;padding: 50px 25px 20px;
						@include desktop{
							padding-bottom: 0;
						}
						@include tablet{
							padding: 50px 20px 0px;
						}
						li {
							overflow: hidden;margin-bottom: 16px;
							.tlt {
								float: left;width: 80px;line-height: 16px;text-align-last: justify;text-align: justify;text-justify: distribute-all-lines;color: #fff;
							}
							.js {
								float: left;font-size: 14px;line-height: 16px;color: #fff;width: 190px;
							}
						}
					}
					
					.ckxqnr {
						width: 105px;height: 36px;background: #fff;float: right;margin-right: 25px;
						a {
							display: block;line-height: 36px;text-align: center;color: #9f7124;
						}
					}
					&:hover .info {
						opacity: 1;
					}
				}
				
			}
		}
		.xiaotu {
			width: 1035px;float: right;
			@include desktop{
				width: 896px;
			}
			@include tablet{
				width: 730px;
			}
			@include mobile{
				width: 100%;
			}
			li {
				float: left;width: 325px;height: 280px;margin-right: 30px;margin-bottom: 30px;position: relative;overflow: hidden;
				&:nth-child(3n) {
					margin-right: 0;
				}
				@include desktop{
					width: 280px;height: 246px;margin-right: 25px;margin-bottom: 25px;
				}
				@include tablet{
					width: 230px;margin-right: 20px;
				}
				@include mobile{
					width: 3.4rem;height: 4rem; margin-right: 0.3rem; border:  1px solid #999999;
					&:nth-child(3n){
						margin-right: 0.3rem;
					}
					&:nth-child(2n){
						margin-right: 0;
					}
				}
				.jieshao {
					position: absolute;bottom: -40px;left: 40px;width: 245px;height: 36px;background: rgba(0, 0, 0, 0.5);border-radius: 10px;font-size: 14px;line-height: 36px;color: #fff;text-align: center;transition: all 0.5s;
					&:hover{
						bottom: 20px;
					}
					@include desktop{
						width: 90%;left: 5%;
					}
					@include tablet{
						width: 90%;left: 5%;
					}
					@include mobile{
						width: 3rem; height: 0.36rem; border-radius: 0.18rem; font-size: 0.2rem; line-height: 0.2rem;bottom: auto;top: 2.23rem;
					}
				}
				.design_auther {
					height: 280px;background-size: cover !important;
					@include desktop{
						height: 246px;
					}
					@include mobile{
						height: 2.8rem;
					}
				}
				.mobile_jieshao{
					display: none;
					@include mobile{
						display: block;
						padding:  0.3rem;
						p{
							font-size: 0.24rem; 
							line-height: 0.24rem; color: #333333;

							&:nth-child(2){
								font-size: 0.2rem;
								line-height: 0.24rem;
								margin-top: 0.13rem;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow:hidden;
								height: 0.24rem; color: #666666;
							}
						}
					}
				}
			}
		}
	}
	.chakanquan {
		width: 200px;height: 40px;background: #9f7124;text-align: center;margin-left: auto;margin-right: auto;margin-top: 10px;
		@include mobile{
			width: 2rem; height: 0.5rem;  margin-top: 0rem;
		}
		a {
			color: #fff;line-height: 40px;font-size: 16px;
			@include mobile{
				line-height: 0.5rem; font-size: 0.24rem;
			}
		}
	}

}




/*住帅VR看房结束*/





/*首页在施工地结束*/
.zhushuai_gongdi {
	
	background-size: cover !important;
	@include mobile{
		background: url(../images/index_jg.jpg) top center no-repeat!important;
		background-size: contain!important;
		padding-top: .2rem;
	}
	.container {
		position: relative;
		height: 950px;
		@include mobile{
			height: auto;
		}
		.anli_zaishi {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			visibility: hidden;
			opacity: 0;
			transition: all 2s;
			&.show{
				visibility: inherit;opacity: 1;
			}
			.top_nr {
				.lefttp{
					width: 50%;
					float: left;
					position: relative;
					z-index: 0;
					img{
						height: 950px;
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
					}
				}
				.rightnr {
					width: 50%;
					float: right;
					position: relative;
					.title2 {
						top: 70px;
						left: 70px;
						@include tablet{
							left: 20px;
						}
						.vrtitle,p{
							color: #fff;
						}
						.line {
							background: #fff;
							&:before,&:after{
								background: #fff;
							}
						}
					}
					.gongdiinfo {
						padding: 224px 70px 28px;
						@include tablet{
							padding: 224px 20px 28px;
						}
						.gdname {
							font-size: 36px;
							line-height: 36px;
							color: #fff;
							font-weight: bold;
							margin-bottom: 22px;
						}
						.xinxi{
							dd {
								width: 33.33%;
								float: left;
								margin-bottom: 28px;
								color: #fff;
								font-size: 16px;
								@include desktop{
									font-size: 14px;
								}
								i {
									width: 20px;
									height: 22px;
									display: inline-block;
									background: url(../images/icongd.png) no-repeat center;
									background-size: 20px;
									position: relative;
									top: 4px;
									margin-right: 12px;
									&.icon1{
										background-position: 0px 0px;
									}
									&.icon2{
										background-position: -0px -21px;
									}
									&.icon3{
										background-position: 0px -42px;
									}
									&.icon4{
										background-position: 0px -64px;
									}
									&.icon5{
										background-position: 0px -86px;
									}
									&.icon6{
										background-position: 0px -108px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	.bottom_nr {
		width: 100%;
		position: relative;
		z-index: 9;
		.time_line {
			background: #9f7124;
			padding: 30px 40px;
			.title_nr {
				font-size: 24px;
				color: #fff;
				line-height: 24px;
				margin-bottom: 30px;
			}
			.shigongjd {
				border-top: 1px solid #fff;
				li {
					float: left;
					width: 14.24%;
					text-align: center;
					color: #b3b3b3;
					font-size: 16px;
					cursor: pointer;
					.yuan {
						width: 5px;
						height: 5px;
						background: #b3b3b3;
						border-radius: 50%;
						margin-left: auto;
						margin-right: auto;
						margin-top: -3px;
					}
					p {
						margin-top: 22px;
					}
					&.on,&:hover{
						color: #fff;
						.yuan{
							background: #fff;
						}
					}
				}
			}
			.yycg {
				width: 160px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background: #fff;
				margin-top: 30px;
				margin-left: auto;
				margin-right: auto;
				a {
					line-height: 40px;
					color: #9f7124;
					display: block;
					font-size: 16px;
				}
			}
		}
	}
	.genduocp {
		position: absolute;
		z-index: 999;
		bottom: 40px;
		.anli_list {
			padding-left: 90px;
			@include desktop{
				padding-left: 0px;
			}
			.lytp{
				height: 140px;overflow: hidden;
				img{
					width: 100%;height: 100%;
				}
			}
			li {
				float: left;
				width: 200px;
				margin-right: 20px;
				&:last-child {
					background: #9f7124;
					margin-right: 0;
					.more_al {
						line-height: 140px;
						text-align: center;
						color: #fff;
						font-size: 18px;
					}
				}
				&.nowli .anlit .name {
					color: #9f7124;
				}
				@include desktop{
					width: 183px;
				}
				@include tablet{
					margin-right: 16px;
					&:nth-child(5) {
						display: none;
					}
				}
			}
			.alidet{
				margin-top: 10px;
				.name {
					font-size: 14px;
					line-height: 14px;
					color: #fff;
					margin-bottom: 10px;
				}
				.xinxi{
					dd {
						width: 50%;
						float: left;
						margin-bottom: 8px;
						color: #fff;
						font-size: 12px;
						white-space: nowrap;
						overflow: hidden;
						i {
							width: 14px;
							height: 14px;
							display: inline-block;
							background: url(../images/icongd.png) no-repeat center;
							background-size: 14px;
							position: relative;
							top: 4px;
							margin-right: 5px;
							&.icon1{background-position: 0px -1px;}
							&.icon2{background-position: -0px -16px;}
							&.icon3{background-position: 0px -31px;}
							&.icon4{background-position: 0px -46px;}
							@include desktop{
								margin-right: 0;
							}
						}
					}
				}
			}
		}
	}
	@include mobile{
		.m_gongdi{
			padding-bottom: 0.88rem;
			.info{
				background: #f2f2f2;  width: 7.1rem; height: 8rem; border-radius: 0.2rem; overflow: hidden;
				.cp{
					width: 7.1rem; height: 4rem; border-radius: 0.2rem;overflow: hidden;
					img{
						width: 100%;height: 100%;
					}
				}
				.gongdiinfo{
					padding:  0 0.2rem; 
					.gdname{
						font-size: 0.36rem; line-height: 0.36rem; margin-top: 0.3rem; 
					}
					.xinxi{
						margin-top: 0.3rem;
						dd{
							float: left; font-size: 0.22rem; line-height: 0.3rem; color: #666; white-space: nowrap;
							&:nth-child(1),&:nth-child(4){
								width: 1.88rem;
							}

							&:nth-child(2),&:nth-child(5){
								width: 2.30rem;
							}
							
							&:nth-child(3),&:nth-child(6){
								width: 2.5rem;
							}
							.iconfont{
								font-size: 0.2rem; line-height: 0.3rem; color: #9f7124; margin-right: 0.12rem;
							}
						}
					}
				}
				.time_line{
					margin-top: 0.24rem; padding:  0 0.2rem;
					.title_nr{
						font-size: 0.3rem; line-height: 0.3rem; color: #333333;
					}
					.outer{
						width: 7.1rem; height: 1rem; overflow: hidden;
						.bigCell{
							width: 7.1rem; overflow-x: scroll; height: 1.4rem; 
							.shigongjd{
								width: 16rem; margin-top: 0.04rem; border-top: 1px solid #666666; padding-left: 0.7rem; margin-top: 0.2rem; 
								li{
									float: left;
									width: 1.92rem; text-align: center; scroll-snap-align: center; 
									.yuan{
										width: 0.08rem; height: 0.08rem; border-radius: 50%; background: #666666; display: block; margin-left: auto; margin-right: auto; margin-top: -0.04rem;
									}
									p{
										font-size: 0.22rem; margin-top: 0.24rem;
									}
									&.on{
										.yuan{
											background: #9f7124;
										}
										p{
											color: #9f7124;
										}
									}

								}
							}
						}
					}
					
					
					.yycg{
						width: 1.5rem; height: 0.45rem; background: #9f7124; line-height: 0.45rem; text-align: center; margin:  0 auto; margin-top: 0.15rem;
						a{
							font-size: 0.24rem; line-height: 0.45rem; color: #fff;
						}
					}
				}
			}
			.swiper-button-prev,.swiper-button-next{
				width: 0.12rem; font-size: 0.2rem; top: auto;bottom: 1.7rem;
				&::after{
					font-size: 0.2rem; color: #999999;
				}
			}
			.swiper-pagination{
				bottom: 0.5rem;
				.swiper-pagination-bullet{
					width: 0.06rem; height: 0.06rem;  background: #999999; opacity: 1;
				}
				.swiper-pagination-bullet-active{
					width: 0.3rem; height: 0.06rem; background: #9f7124; border-radius: 0.03rem;
				}
			}
			
		}
	}
	
}





/*在施工地*/


/*首页装修攻略*/
.box10{
	@include mobile{
		background: url(../images/index_jg.jpg) top center no-repeat;background-size: contain;padding-top: .2rem;
	}

	.accordion-box {
		width: 100%;height: 550px;
		.fenlei{
			@include mobile{
				display: flex; justify-content: center; border-bottom: 1px solid #666666;
				.choose{
					width: 2rem; text-align: center; font-size: 0.24rem; line-height: 0.75rem;
					&.active{
						border-bottom: 2px solid #9f7124;
					}
				}
			}
			
		}
		ul {
			padding: 0;width: inherit;height: 550px;overflow: hidden;position: relative;
			li {
				width: 990px;position: absolute;top: 0;transition: all ease 0.3s 0s;
				&:nth-child(1) {
					left: 0;
				}
				&:nth-child(2) {
					left: 200px;
					@include desktop{
						left: 174px;
					}
					@include tablet{
						left: 142px;
					}
				}
				&:nth-child(3){
					left: 400px;
					@include desktop{
						left: 348px;
					}
					@include tablet{
						left: 284px;
					}
				}
				@include desktop{
					width: 856px;
				}
				@include tablet{
					width: 700px;
				}
				@include mobile{
					&#zxz,&#zxh{
						display: none;
					}
					width: 100%;
					position: unset; top: auto; left: auto;
				}
				.left {
					width: 790px;height: 550px;overflow: hidden;height: inherit;overflow: hidden;position: relative;float: left;
					@include desktop{
						width: 682px;
					}
					@include tablet{
						width: 558px;
					}
					@include mobile{
						width: 100%;
					}
					.shadow {
						position: absolute;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);transition: all ease 0.3s 0s;padding: 40px;
						@include mobile{
							position: unset; padding: 0; background: none;
						}
						.dh {
							height: 50px;background: #fff;line-height: 50px;padding: 0 20px;
							@include mobile{
								height: 0.5rem; line-height: 0.5rem; padding: 0; display: flex; justify-content: space-between;
								margin-top: 0.3rem; margin-bottom: 0.4rem;
							}
							i {
								display: inline-block;width: 10px;height: 10px;border-radius: 5px;background: #333333;margin-right: 7px;
								@include mobile{
									display: none;
								}
							}
							.anispan {
								padding-right: 38px;cursor: pointer;
								@include mobile{
									padding-right: 0; width: 1.46rem; height: 0.5rem; border-radius: 0.25rem; border: 1px solid #e6e6e6; background: #e6e6e6; font-size: 0.24rem; line-height: 0.5rem; text-align: center;
								}
							}
							.nowspan  {
								color: #9f7124;
								@include mobile{
									border: 1px solid #9f7124; background: #f9e2c0;
								}
								
								i{
									background: #9f7124;
								}
							}
						}
						.newslist {
							padding-top: 20px;
							@include mobile{
								padding-top: 0;
							}
							dl{
								height: 7.26rem; overflow: hidden;
								dd {
									line-height: 68px;color: #fff;border-bottom: 1px solid #fff;
									@include mobile{
										border: 1px solid #999999; margin-bottom: 0.2rem;
									}
									a {
										color: #fff;
										@include mobile{
											display: flex; box-sizing: border-box; padding: 0.2rem; justify-content: space-between;
											color: #333; overflow: hidden; 
											.lt{
												width: 1.2rem; height: 1.2rem; background: #e6e6e6; text-align: center; overflow: hidden;
												div{
													font-size: 0.4rem; color: #333333; margin-top: 0.36rem; line-height: 0.4rem;
												}
												span{
													display: block; font-size: 0.22rem; margin-top: 0.01rem; margin-left: 0.3rem; line-height: 0.22rem;
												}
	
											}
											.rt{
												width: 5.2rem; height: 1.2rem;
												div{
													font-size: 0.3rem; line-height: 0.34rem; white-space: normal; text-overflow: ellipsis; overflow: hidden; height: 0.34rem;
												}
												p{
													font-size: 0.22rem; line-height: 0.32rem; margin-top: 0.1rem; height: 0.64rem; overflow: hidden;
												}
											}
										}
									}
									&:hover a {
										color: #9f7124;
									}
								}
							}
							
						}
						.ckgd {
							width: 140px;height: 40px;background: #9f7124;position: absolute;bottom: 30px;right: 40px;
							@include mobile{
								position: unset; bottom: auto; right: auto; margin-top: 0.34rem; margin-left: auto; margin-right: auto;
							}
							a {
								color: #fff;display: block;line-height: 40px;text-align: center;
							}
						}
					}
					img {
						z-index: -1;width: 790px;height: 550px;transition: all ease 0.3s 0s;
						@include mobile{
							display: none;
						}
						
					}
				}
				.right {
					width: 200px;height: 550px;float: left;position: relative;transition: all ease 0.3s 0s;
					@include desktop{
						width: 174px;
					}
					@include tablet{
						width: 142px;
					}
					@include mobile{
						display: none;
					}
					.title {
						writing-mode: vertical-lr;writing-mode: tb-lr;position: absolute;top: 54px;left: 83px;font-size: 24px;
						@include tablet{
							left: 55px;
						}
					}
					.sub-title {
						writing-mode: vertical-lr;writing-mode: tb-lr;position: absolute;bottom: 55px;left: 70px;width: 60px;height: 60px;background: url(../images/gcal.png) no-repeat center;background-size: 180px 125px;
						@include tablet{
							left: 46px;
						}
					}
					.text-sub1 {
						background-position: 0px -2px;
					}
					.text-sub2 {
						background-position: -60px -2px;
					}
					.text-sub3 {
						background-position: -120px -0px;
					}
				}
				&:nth-child(odd) .right {
					background: #dee0e2;
				}
				&:nth-child(odd) .right::before {
					border-right-color: #dee0e2;
				}
				&.on{
					.right{
						.text-sub1{
							background-position: 0px -64px;
						}
						.text-sub2 {
							background-position: -60px -64px;
						}
						.text-sub3 {
							background-position: -120px -64px;
						}
					}
				}
				&:nth-child(1){
					.right {
						background: #e6e6e6;
					}
				}
				&:nth-child(2){
					.right {
						background: #ffffff;
					}
				}
				&:nth-child(3){
					.right {
						background: #e6e6e6;
					}
				}
				&.on{
					.right {
						background: #9f7124;
					}
					.text-title {
						color: #fff;
					}
				}
			}
		}
	}
}
/*首页装修攻略结束*/

/*联系我们*/
.zhushuai_content{
	@include mobile{
		display: none;
	}
	.map {
		width: 50%;
		height: 730px;
		float: left;
		#container2 {
			height: 730px;
		}
	}
	.lh-footer-r {
		background: #313131;
		width: 50%;
		height: 730px;
		float: right;
		.lianxi_ct {
			padding: 70px 0 0 70px; max-width: 694px;
			@include desktop{
				padding: 50px;
			}
			@include tablet{
				padding: 50px;
			}
			#share-3 {
				margin-bottom: 70px;
				margin-top: 28px;
			}
			.lh-footer-nav {
				border-top: 2px solid #999999;
				padding-top: 60px;
				li {
					color: #fff;
					font-size: 14px;
					line-height: 14px;
					margin-bottom: 25px;
				}
			}
			.foottb {
				width: 100%;
				padding-top: 20px;
				padding-bottom: 60px;
				border-bottom: 1px solid #fff;
				dd {
					width: 33%;
					float: left;
					color: #fff;
					border-right: 1px solid #fff;
					p {
						padding-top: 10px;
					}
					&:nth-child(2) {
						text-align: center;
						i {
							margin-left: auto;
							margin-right: auto;
						}
					}
					
					&:nth-child(1)  {
						i{
							margin-left: 10px;
						}
						
					}
					&:nth-child(3) {
						border-right: none;
						i {
							margin-right: 20px;
							float: right;
						}
						p {
							float: right;
							width: 100%;
							text-align: right;
						}
					}
					.icon {
						width: 34px;
						height: 34px;
						background: url(../images/tubiao_ye.png) no-repeat;
						background-size: 110px;
						display: block;
					}
					.icon1 {
						background-position: 0 1px;
					}
					.icon2 {
						background-position: -40px 1px;
					}
					.icon3 {
						background-position: -74px 1px;
					}
					
				}
			}
		}
	}
	.lh-footer-a{
		margin-top: 70px;
		h4 {
			color: #fff;
			font-size: 12;
	line-height: 12px;
	margin-bottom: 10px;
	a{
		color: #fff;
	}
	}
	}
	
}


/*联系我们结束*/

/*手机首页底部联系我们*/
@include mobile{
	#offer{
		height: 10rem; position: relative;     background: url(../images/index_jg.jpg) top center no-repeat;
		background-size: contain;
		padding-top: .2rem;
	}
}
